<template>
	<!-- @tap="playCurr(index,item.type,item.content,item.dirName)" -->
	<view class="intro" :class="{'sqSys':currSys == 'sqSys'}">
		<view class="courseList"> 
			<view class="innerListItem"
				v-for="(item,index) in resList"
				:key="index"
				@tap="playCurr(index,item)"
			>
				<view class="itemTop spaceBet">
					<block v-if="fromPage == 'resDetPage'">
						<view class="itemTit ellip"><text class="courseNum">{{(index+1)}}.</text>{{item.dirName}}</view>
					</block>
					<block v-else>
						<view class="itemTit ellip"
							:class="[currIndex == index ? 'active' : '']"
						><text class="courseNum">{{(index+1)}}.</text>{{item.dirName}}</view>
					</block>
					<template v-if="buyTag == 0">
						<block v-if="index == 0">
							<view v-if="trailTag == 1" class="iconfont icon-bofang hasRate"></view>
							<view v-if="trailTag == 2" class="iconfont icon-suoding"></view>
						</block>
						<block v-else>
							<view class="iconfont icon-suoding"></view>
						</block>
					</template>
					<template v-else-if="buyTag == 1">
						<view class="iconfont icon-bofang hasRate"></view>
					</template>
				</view>
				<view class="itemBot spaceBet">
					<view class="botL">
						<text class="iconfont icon-wait"></text>
						<text>{{item.allTime}}</text>
						<block v-if="buyTag == 1">
							<text class="lineView" v-if="item.finishFlag > 0">|</text>
							<text class="specCol" v-if="item.finishFlag > 0">已学习{{(item.finishFlag)*100}}%</text>
						</block>
					</view>
					<view v-if="trailTag == 1 && freeTag == 2 && index == 0 && buyTag == 0" class="botR">
						<block v-if="item.type == 1">试看</block>
						<block v-if="item.type == 2">试听</block>
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			resList:Array,
			trailTag:Number,
			freeTag:Number,
			buyTag:Number,
			fromPage:String,
			currIndex:Number,
			currSys:{
				type:String,
				default:'common'
			}
		},
		methods:{
			playCurr(index,item){
				this.$emit('playCurr',index,item)
			}
		}
	}
</script> 

<style lang='scss' scoped>
	.lineView{
		margin: 0 10rpx;
	}
	.courseList{
		background: #fff;
		padding: 0rpx 30rpx 20rpx;
	}
	.innerListItem{
		margin-bottom: 20rpx;
		.itemBot{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			color: $pss-text-colora;
			align-items: center;
			.botL{
				margin-right: 30rpx;
				.icon-wait{
					font-size: 24rpx;
					margin-right: 10rpx;
				}
				.specCol{
					color: $pss-color-green;
				}
			}
			.botR{
				color: $pss-color-primary_1;
			}
		}
		.itemTop{
			height: 60rpx;
			line-height: 60rpx;
			align-items: center;
			.itemTit{
				width: 90%;
				font-size:28rpx;
				color: $pss-text-color3;
				.courseNum{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				&.active{
					color: $pss-color-primary_1;
				}
			}
			.icon-bofang{
				font-size: 42rpx;
				color: #eee;
				&.hasRate{
					color: $pss-color-primary_1; 
				}
			}
			.icon-suoding{
				width: 43rpx;
				height: 43rpx;
				line-height: 43rpx;
				border-radius: 50%;
				background: $pss-text-colora;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				margin-top: 20rpx; 
			}
		}
	}
	.sqSys{
		.courseList{
			background: transparent;
			padding: 0;
		}
		.itemBot{
			color: $sq-main8 !important;
		}
		.itemTit{
			color: $sq-main0 !important;
		}
		.icon-bofang.hasRate,
		.botR{
			color: $pss-sq-main !important;
		}
	}
</style>